<style lang="less" scoped>
	@import '../.././commom/less/base';

	.index_page {
		font-family: "HYQiHei";
	}

	.header {
		margin: 0rpx 0 30rpx 50rpx;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 50rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		margin-top: 236rpx;
	}

	.header {
		text {
			display: block;
		}
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}

	.CopyRight {
		font-size: 23rpx;
		color: #999;

		.t {
			display: flex;
			justify-content: center;
		}
	}

	.auth_msg {
		width: 500rpx;
		border-top: 1px #ccc solid;
		margin: 0 auto;
		padding-top: 60rpx;
		margin-top: 250rpx;

		.t {
			color: #333;
			font-size: 26rpx;
		}

		.t+p {
			color: #999;
			padding-top: 20rpx;
			font-size: 26rpx;
			line-height: 32rpx;
		}
	}
</style>
<template>
	<view class="index_page">
		<uni-nav-bar title="访客登记-云步e园" fixed="true" shadow="false"></uni-nav-bar>
		<view>{{ ops}}</view>
		<view>
			<view class='header'>
				<image src="../../static/image/logo.jpg"></image>
				<view>云步e园欢迎您</view>
			</view>
			<view class="auth_msg">
				<p class="t">申请获取以下权限</p>
				<p>获取你的公开信息（昵称、头像、手机号、地区及性别）</p>
			</view>
			<!-- <button class='bottom' type='primary' open-type="getUserInfo" @getuserinfo="wxappLoginWx" withCredentials="true" lang="zh_CN">授权登录</button> -->
			<!-- <button class='bottom'>下次再说</button> -->
			<button class='bottom' type='primary' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>
		</view>
		<view class="CopyRight"><text class="t">CopyRight © 2016-2021 华捷艾米 版权所有 京ICP备18040828号-1</text></view>
	</view>
</template>
<script>
	import {
		getSessionKey,
		login,
		getPhone
	} from '../../api/user.js'
	import WXBizDataCrypt from '../.././commom/js/WXBizDataCrypt.js'

	export default {
		data() {
			return { 
				code: "",
				sessionKey: '',
				encryptedData: "",
				iv: "",
				nickName: null,
				avatarUrl: null,
				setName: '',
				// isCanUse: uni.getStorageSync('isCanUse') //默认为true  记录当前用户是否是第一次授权使用的
			}
		},

		onLoad() {
			// this.login()
		},
		methods: {
			getPhoneNumber(e) {
				this.wxappLoginWx({
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				})
			},
// 授权流程
// 1.用code获取sessionkey 2.用sessionkey换取手机号  3.用手机号和最新code换取token
			wxappLoginWx(phone) {
				let _this = this
				uni.getProvider({
					service: 'oauth',
					success: function(oauth) {
						if (~oauth.provider.indexOf('weixin')) {
							
							uni.login({
								provider: 'weixin',
								success: (res) => {
									_this.code = res.code;
									
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => {
											getSessionKey({ code: _this.code }).then(sk => {
												if(sk.data.code === 0) {
													_this.sessionKey = sk.data.data;
													
// 解密获取手机号
													 try {
														 var _crypt = new WXBizDataCrypt(_this.APPID, sk.data.data);
														  var getPhone = _crypt.decryptData(phone.encryptedData, phone.iv);
														 uni.setStorage({
														 	key: 'wxPhone',
														 	data: getPhone.phoneNumber
														 });
														 loginHandle();
													 } catch {
														 _this.loginErr();
														 console.log('获取手机失败')
													 };
													
// 手机号登录
   /**
 * @description: 由于获取的code只能使用一次，所以第二次传递code必须是最新的
 */
											function loginHandle() {
												uni.showLoading({
													title: '登录中',
													mask: true
												});
												uni.login({
													provider: 'weixin',
													success: (res1) => {
														login({
															code: res1.code,
															phone: getPhone.phoneNumber,
														}).then(login => {
															
															if (login.data.code === 0) {
																uni.hideLoading();
																uni.reLaunch({
																	url: '/pages/home/home'
																});
																uni.showToast({
																	title: '登录成功'
																});
																uni.setStorage({
																	key: 'Authorization',
																	data: login.data.data
																});
															} else {
																_this.loginErr()
															}
														
														});
													}
													});
											}
												} else {
													_this.loginErr()
												}
											});
											
// 存储用户信息
											uni.setStorage({
												key: 'wxUser',
												data: info.userInfo
											});
										},
										fail: () => {
											_this.loginErr()
										}
									})

								},
								fail: () => {
									_this.loginErr()
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
			},
			loginErr() {
				uni.showToast({
					title: '网络异常！请重新授权登录',
					icon: 'none'
				})
			}
		},
		mounted() {
		}
	}
</script>
